<template>
  <v-container fluid class="record-wrapper">

    <v-layout row wrap justify-center>
      <v-flex md8 xs12>

      <v-flex md12>
        <v-layout row align-center>
          <v-flex md2>
            <v-btn icon @click="$router.push('/version')">
          <v-icon>
            arrow_back
          </v-icon>
        </v-btn>
          </v-flex>
          <v-flex md8 class="text-md-center">
            <span class="headline">版本记录</span>
          </v-flex>
          <v-flex md2 d-flex justify-end align-center>
             <span class="title">{{date}} {{week}}</span>
          </v-flex>
        </v-layout>
      <v-divider></v-divider>
      </v-flex>

      <v-flex md12 class="mt-2">
        <v-data-table :loading="showProgress" :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ PROJECT[props.item.projectName]  }}</td>
            <td class="text-xs-center subheading">{{ getTime(props.item.createTime, 'date') }}</td>
            <td class="text-xs-center subheading">{{ props.item.versionNumber }}</td>
            <td class="text-xs-center subheading">
              <v-avatar size="16" :color="statusColor[props.item.status]"></v-avatar>  <span class="status-td"> {{ props.item.status | Status }}</span>
            </td>
            <td class="text-xs-center" width="24%">
              <v-btn flat round dark color="green" class="mx-1" @click="details(props.item)">
                <span class="mx-1">详情</span>
                <v-icon color="green">more</v-icon>
              </v-btn>
              <v-btn :disabled="props.item.status != 1" flat round dark color="indigo" class="mx-1" @click="rollback(props.item)">
                <span class="mx-1">回滚</span>
                <v-icon color="indigo">update</v-icon>
              </v-btn>
            </td>
          </template>
          <!-- 没有数据时显示的提示 -->
          <template slot="no-data">
            <div class="text-xs-center text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
        <div class="text-xs-center my-2">
      <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
    </div>
      </v-flex>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as version from "../../api/version";
import * as demand from "../../api/demand";
import { mapState } from 'vuex'

import { getTime } from '../../util';
let PROJECT = null;
export default {
  data: () => ({
    tabs: null,
    showProgress: false,
    dialog: false,
    modal: false,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    date: "",
    modalText: "",
    projectName: 1,
    departmentName: 1,
    projectItems: [],
    departmentItems: [],
    tableData: [],
    showProgress: false,
    statusColor: {
      "0": "amber",
      "1": "green",
      "2": "indigo",
      "3": "red"
    },
    headers: [
      {
        text: "项目名称",
        value: "projName",
        align: "center",
        sortable: false
      },
      {
        text: "发布时间",
        value: "releaseTime",
        align: "center",
        sortable: false
      },
      {
        text: "版本号",
        value: "version",
        align: "center",
        sortable: false
      },
      {
        text: "版本状态",
        value: "status",
        align: "center",
        sortable: false
      },
      {
        text: "操作",
        value: "actions",
        align: "center",
        sortable: false
      }
    ],
    dayData: {},
    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    week: '',
    projTypesItems: {
      '0': '无',
      '1': '客户端',
      '2': '服务端',
    },
    rollbackItem: null,
    PROJECT: {}
  }),
  computed: {
    ...mapState(['state_projects','state_departments'])
  },
  mounted() {
    this.date = this.$route.query.date;
    let day = new Date(this.date);
    this.week = this.weekdays[day.getDay()];
    // this.initialize();
    // this.getProjectList()
    this.getDayList()
    this.$nextTick(()=>{
      _.forEach(this.state_projects, (item)=>{
        this.PROJECT[item.value] = item.text
      })
    })

    $Vue.$off('areaCodeChange')
    $Vue.$on('areaCodeChange', ()=>{
      this.offset = 0
      this.pagination.page = 1
      this.getDayList()
    })
    $Vue.$off('AREAS_READY')
    $Vue.$on('AREAS_READY', ()=>{
      this.offset = 0
      this.pagination.page = 1
      this.getDayList()
    })

  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  filters: {
    Status(val) {
      switch (val) {
        case 0:
          return "老版本";
        case 1:
          return "运行中";
        case 2:
          return "已回滚";
        case 3:
          return "未完成";
        default:
          return "未知状态";
      }
    },
     ProjName: function(val) {
      return PROJECT[val]
    }
  },
  methods: {
    getTime,
    initialize() {
      this.tableData = [
        {
          name: "长沙麻将",
          time: "10:32:26",
          number: "V10004",
          leader: "刘伟",
          record: "修改按钮显示错误的BUG",
          status: 1
        },
        {
          name: "扎鸟麻将服务端",
          time: "12:42:06",
          number: "s2.20180530",
          leader: "杨铭",
          record: "修改打米胡不了的BUG",
          status: 2
        }
      ];
    },
    rollbackVersion() {
      let opt = {
        id: this.rollbackItem.id
      };
      version.rollbackVersion.r(opt).then(({ data }) => {
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        if (data.result == 0) {
          this.getDayList()
        }
      });
    },
    //  getProjectList() {
    //   demand.getProjectList.r().then(({ data }) => {
    //     let d = data.data;
    //     if (data.result == 0) {
    //       let projects = {};
    //       _.forEach(d.dataList, (item, i)=>{
    //         projects[item.id] = item.projectName+ '-' + this.projTypesItems[item.type]
    //       })
    //       PROJECT = projects
    //       this.getDayList()
    //     }
    //   });
    // },
     getDayList() {
       let date = this.$route.query.date;
       date = date.replace(/-/g , '/')
       let opt = {
          fromTime: new Date(`${date} 00:00:00`).getTime(),
          toTime: new Date(`${date} 23:59:59`).getTime(),
          offset: this.offset,
          limit: this.limit
       }
      version.getDayList.r(opt).then(({ data }) => {
        if (data.result == 0) {
          let items = data.data;
          this.tableData = data.data.dataList
          this.pagination.pageCount = data.data.totalCount
              ? Math.ceil(data.data.totalCount / this.limit)
              : 1;
        }
      });
    },
    details(item) {
      let date = getTime(item.releaseTime).split(' ')[0]
      this.$router.push(`/details?type=details&version=${item.demandId}`)
    },
    rollback(item) {
      this.rollbackItem = item
      this.rollbackVersion()
    },
    pageChange(page) {
    this.offset = (page - 1) * this.limit;
    this.getDayList();
    }
  }
};
</script>

<style lang="less" scoped>
</style>


